<template>
    <!--管理员-->
    <div class="role">
        <a-card>
            <Search :columns="searchColumns" :search.sync="search" :filter="filter" ex :changeExport="changeExport" />
        </a-card>
        <a-card>
            <div class="table">
                <div class="toolbar">
                    <a-button type="primary" @click="onClickDelivery"> 一键配送 </a-button>
                    <a-button type="primary" @click="onClickSyncOrder"> 订单同步 </a-button>
                </div>
                <div class="order-list" v-for="(items, index) in data" :key="index">
                    <div class="order-list-title">
                        <div>
                            <span class="bold">订单号</span>
                            ：{{ items.tid }}
                        </div>
                        <div>
                            <span class="bold">创建时间</span>
                            ：{{ items.created }}
                        </div>
                        <div>
                            <span class="bold">预计配送时间</span>
                            ：
                            <span v-if="items.address">
                                {{ items.address.delivery_start_time }}
                            </span>
                        </div>
                        <div>
                            <span class="bold">预计送达时间</span>
                            ：
                            <span v-if="items.address">
                                {{ items.address.delivery_end_time }}
                            </span>
                        </div>
                        <div>
                            <span class="bold">配送状态</span>
                            ：{{ deliveryStatus[items.is_delivery] }}
                        </div>
                        <div>
                            <span class="bold">状态</span>
                            <span :class="items.status">：{{ items.status_str }}</span>
                        </div>
                    </div>
                    <div class="order-list-goods" v-if="items.goods">
                        <div class="goods-list" v-for="(goods, i) in items.goods" :key="i">
                            <div class="goods-item">
                                <img :src="goods.pic_path" alt="" />
                                <div class="goods-info">
                                    <div class="goods-title">
                                        {{ goods.title
                                        }}<span style="color:rgba(0, 0, 0, 0.65)"> 数量:{{ goods.num }}</span>
                                    </div>
                                    <div>口味： {{ goods.sku_properties_name.map(name => name.v)[0] }}</div>
                                    <div>净含量：{{ goods.sku_properties_name.map(name => name.v)[1] }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="order-list-info">
                        <div class="user-info">
                            <div class="address">
                                <span>收货人姓名：{{ items.address ? items.address.receiver_name : '' }}</span>
                                <span>收货人电话：{{ items.address ? items.address.receiver_tel : '' }}</span>
                            </div>
                            <div class="address-detail">
                                收货人地址：
                                {{ formatAddress(items.address) }}
                            </div>
                        </div>
                        <div class="delivery-info">
                            <div>配送人姓名：{{ items.deliveryOrder ? items.deliveryOrder.username : '无' }}</div>
                            <div>配送人手机号：{{ items.deliveryOrder ? items.deliveryOrder.phone : '无' }}</div>
                        </div>
                        <div>冰箱编号：{{ items.number }}</div>
                        <div>渠道: {{ items.channel }}</div>
                        <!-- <div>配送状态：{{ deliveryStatus[items.is_delivery] }}</div> -->
                    </div>
                    <div class="order-list-split"></div>
                    <div class="order-bottom">
                        <div class="order-bootom-desc">
                            <div class="order-desc">
                                <span class="order-desc-span">
                                    客服备注:
                                    <span class="desc">{{ items.desc2 }}</span>
                                </span>
                                <span class="order-desc-span">
                                    备注:
                                    <span class="desc">{{ items.desc }}</span>
                                </span>
                                <span class="order-desc-span order-claim">
                                    赔付情况：
                                    <span class="desc">{{ items.claim }}</span>
                                </span>
                            </div>
                            <div>
                                商品留言:
                                {{
                                    items.goods
                                        .filter(
                                            goods =>
                                                !(
                                                    goods.buyer_messages == '' ||
                                                    goods.buyer_messages == 'Array' ||
                                                    goods.buyer_messages == '[]'
                                                )
                                        )
                                        .map(goods => goods.buyer_messages)
                                }}
                            </div>
                        </div>
                        <div class="order-buttons">
                            <div class="button edit" @click="onClickEdit(items)">
                                编辑
                            </div>
                            <div
                                class="button tag"
                                v-if="userInfo.type == 1 || userInfo.type == 3"
                                @click="onClickOrderTag(items)"
                            >
                                标记
                            </div>
                            <div class="button details" @click="onClickOrderDetails(items)">
                                详情
                            </div>
                            <div class="button decryption" @click="onClickDecryption(items)">
                                解密
                            </div>
                            <div class="button transform" @click="onClickOrderDelivery(items)">
                                变更配送员
                            </div>
                            <div class="button edit" @click="onPrint(items)">
                                打印
                            </div>
                        </div>
                    </div>
                    <div class="order-bottomn-desc">
                        <span>订单备注: </span>
                        <span class="desc">{{ items.remark ? items.remark.buyer_message : '' }}</span>
                    </div>
                </div>
                <a-pagination
                    size="small"
                    :total="page.total"
                    :hideOnSinglePage="false"
                    :showQuickJumper="false"
                    :showSizeChanger="true"
                    :pageSize="page.limit"
                    :pageSizeOptions="['10', '20', '30', '40', '50', '100']"
                    :show-total="total => `总共 ${page.total} 条`"
                    @change="onChangePagination"
                    @showSizeChange="onShowSizeChange"
                />
            </div>
        </a-card>
        <a-back-top />
        <Modal :visible.sync="visible" title="订单详情" width="80%">
            <a-descriptions title="订单信息" bordered>
                <a-descriptions-item label="有赞订单号">
                    {{ form.tid }}
                </a-descriptions-item>
                <a-descriptions-item label="订单支付类型">
                    {{ types[form.pay_type] }}
                </a-descriptions-item>
                <a-descriptions-item label="订单支付渠道">
                    {{ payTypes[form.pay_type_str] }}
                </a-descriptions-item>
                <a-descriptions-item label="订单状态">
                    {{ form.status_str }}
                </a-descriptions-item>
                <a-descriptions-item label="退款状态">
                    {{ refund[form.refund_state] }}
                </a-descriptions-item>
                <a-descriptions-item label="主订单类型">
                    {{ orderType[form.type] }}
                </a-descriptions-item>
                <a-descriptions-item label="店铺类型">
                    {{ teams[form.team_type] }}
                </a-descriptions-item>
                <a-descriptions-item label="订单创建时间">
                    {{ form.created }}
                </a-descriptions-item>
                <a-descriptions-item label="订单支付时间">
                    {{ form.pay_time }}
                </a-descriptions-item>
                <a-descriptions-item label="订单发货时间">
                    {{ form.consign_time }}
                </a-descriptions-item>
                <a-descriptions-item label="订单完成时间">
                    {{ form.success_time }}
                </a-descriptions-item>
                <a-descriptions-item label="订单过期时间">
                    {{ form.expired_time }}
                </a-descriptions-item>
                <a-descriptions-item label="赔付情况">
                    {{ form.claim }}
                </a-descriptions-item>
                <a-descriptions-item label="备注">
                    {{ form.desc }}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions v-if="form.address" title="地址信息" bordered>
                <a-descriptions-item label="收货人姓名">
                    {{ form.address.receiver_name }}
                </a-descriptions-item>
                <a-descriptions-item label="收货人手机号">
                    {{ form.address.receiver_tel }}
                </a-descriptions-item>
                <a-descriptions-item label="省">
                    {{ form.address.delivery_province }}
                </a-descriptions-item>
                <a-descriptions-item label="市">
                    {{ form.address.delivery_city }}
                </a-descriptions-item>
                <a-descriptions-item label="区">
                    {{ form.address.delivery_district }}
                </a-descriptions-item>
                <a-descriptions-item label="邮政编码">
                    {{ form.address.delivery_postal_code }}
                </a-descriptions-item>
                <a-descriptions-item label="详细地址">
                    {{ formatAddress(form.address) }}
                </a-descriptions-item>
                <a-descriptions-item label="预计送达时间-开始时间">
                    {{ form.address.delivery_start_time }}
                </a-descriptions-item>
                <a-descriptions-item label="预计送达时间-结束时间">
                    {{ form.address.delivery_end_time }}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions v-if="form.buyer" title="买家信息" bordered>
                <a-descriptions-item label="粉丝昵称">
                    {{ form.buyer.fans_nickname }}
                </a-descriptions-item>
                <a-descriptions-item label="买家手机号">
                    {{ form.buyer.buyer_phone }}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions v-if="form.remark" title="备注信息" bordered>
                <a-descriptions-item label="订单买家留言">
                    {{ form.remark.buyer_message }}
                </a-descriptions-item>
                <a-descriptions-item label="订单商家备注">
                    {{ form.buyer.trade_memo }}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions title="商品信息" bordered v-for="(items, index) in form.goods" :key="index">
                <a-descriptions-item label="商品名称">
                    {{ items.title }}
                </a-descriptions-item>
                <a-descriptions-item label="商品原价">
                    {{ items.price }}
                </a-descriptions-item>
                <a-descriptions-item label="商品图片">
                    <PreviewImage :image="items.pic_path" :join="false" />
                </a-descriptions-item>
                <a-descriptions-item label="税费">
                    {{ items.tax_total }}
                </a-descriptions-item>
                <a-descriptions-item label="商品规格id">
                    {{ items.sku_id }}
                </a-descriptions-item>
                <a-descriptions-item label="运杂费">
                    {{ items.freight }}
                </a-descriptions-item>
                <a-descriptions-item label="分销税费">
                    {{ items.fenxiao_tax_total }}
                </a-descriptions-item>
                <a-descriptions-item label="商品规格编码">
                    {{ items.outer_sku_id }}
                </a-descriptions-item>
                <a-descriptions-item label="商品数量">
                    {{ items.num }}
                </a-descriptions-item>
                <a-descriptions-item label="商品详情链接">
                    <a :href="items.goods_url" target="_blank">
                        {{ items.goods_url }}
                    </a>
                </a-descriptions-item>
                <a-descriptions-item label="商品规格信息">
                    {{
                        items.sku_properties_name
                            .filter(items => items.v)
                            .map(items => `${items.k}: ${items.v}`)
                            .join(' ')
                    }}
                </a-descriptions-item>
                <a-descriptions-item label="是否赠品">
                    {{ items.is_present ? '是' : '否' }}
                </a-descriptions-item>
                <a-descriptions-item label="商品留言">
                    {{ items.buyer_messages }}
                </a-descriptions-item>
            </a-descriptions>
        </Modal>

        <Modal :visible.sync="deliveryVisible" title="一键配送" :ok="onConfirmDelivery">
            <div>确认一键配送吗?</div>
        </Modal>

        <Modal :visible.sync="urgentVisible" title="订单加急" :ok="onConfirmUrgent">
            <div>确认设置该订单为加急订单吗?</div>
        </Modal>

        <ModalForm
            :visible.sync="tagVisible"
            title="订单标记"
            :columns="tagColumns"
            :data.sync="tagForm"
            :ok="onConfrimOk"
        />

        <ModalForm
            :visible.sync="orderVisible"
            title="同步订单"
            :columns="orderColumns"
            :data.sync="orderForm"
            :ok="onConfrimSyncOrder"
        />

        <ModalForm
            :visible.sync="orderDeliveryVisble"
            title="变更配送员"
            :columns="deliveryColumns"
            :data.sync="deliveryForm"
            :ok="onConfrimOrderDelivery"
        />

        <ModalForm
            :visible.sync="editVisible"
            title="编辑"
            layout="vertical"
            :label-span="0"
            :wrapper-span="12"
            :columns="formColumns"
            :data.sync="editForm"
            :ok="onConfrimOrderEdit"
        />
    </div>
</template>

<script>
import { findDeliveryAll, transformOrderDelivery } from '@/api/delivery'
import { findGoodsAll } from '@/api/goods'
import {
    decryptionOrder,
    delOrder,
    deliveryOrder,
    editOrder,
    exportOrder,
    findOrder,
    findOrderList,
    orderTag,
    urgetnOrder
} from '@/api/order'
import { findRefrigeratorAll } from '@/api/refrigerator'
import { findSizeAll } from '@/api/size'
import { findSkuAll } from '@/api/sku'
import rules from '@/validate/admin'

export default {
    name: 'OrderList',
    data() {
        return {
            visible: false,
            tagVisible: false,
            deliveryVisible: false,
            urgentVisible: false,
            orderVisible: false,
            orderDeliveryVisble: false,
            editVisible: false,
            page: {
                page: 1,
                limit: 20,
                total: 0
            },
            columns: [
                {
                    dataIndex: 'tid',
                    title: '订单号',
                    align: 'center',
                    width: 120,
                    fixed: 'left'
                },
                {
                    dataIndex: 'address',
                    title: '地址信息',
                    align: 'center',
                    width: 240,
                    scopedSlots: { customRender: 'address' },
                    fixed: 'left'
                },
                {
                    dataIndex: 'goods',
                    title: '商品信息',
                    align: 'center',
                    width: 280,
                    scopedSlots: { customRender: 'goods' },
                    fixed: 'left'
                },
                {
                    dataIndex: 'delivery',
                    title: '配送信息',
                    align: 'center',
                    scopedSlots: { customRender: 'delivery' },
                    width: 140,
                    fixed: 'left'
                },
                {
                    dataIndex: 'status_str',
                    title: '状态',
                    align: 'center'
                },
                {
                    dataIndex: 'number',
                    title: '冰箱编号',
                    align: 'center'
                },
                {
                    dataIndex: 'delivery_start_time',
                    title: '预计送达开始时间',
                    align: 'center',
                    scopedSlots: { customRender: 'delivery_start_time' }
                },
                {
                    dataIndex: 'delivery_end_time',
                    title: '预计送达结束时间',
                    align: 'center',
                    scopedSlots: { customRender: 'delivery_end_time' }
                },
                {
                    dataIndex: 'channel',
                    title: '渠道',
                    align: 'center'
                },
                {
                    dataIndex: 'claim',
                    title: '赔付情况',
                    align: 'center'
                },
                {
                    dataIndex: 'desc',
                    title: '备注',
                    align: 'center'
                },
                {
                    dataIndex: 'is_delivery',
                    title: '配送状态',
                    align: 'center',
                    scopedSlots: { customRender: 'is_delivery' }
                },
                {
                    dataIndex: 'created',
                    title: '创建时间',
                    align: 'center',
                    scopedSlots: { customRender: 'created' }
                }
            ],
            formColumns: {
                receiver_tel: {
                    type: 'input',
                    label: '收货人手机号'
                },
                delivery_address: {
                    type: 'input',
                    inputType: 'textarea',
                    label: '收货地址'
                },
                delivery_time: {
                    type: 'datarange',
                    label: '预计送达时间',
                    format: 'YYYY-MM-DD HH:mm:ss'
                },
                channel: {
                    type: 'select',
                    label: '订单渠道',
                    options: [
                        {
                            name: '微信小程序',
                            value: '微信小程序'
                        },
                        {
                            name: '美团',
                            value: '美团'
                        },
                        {
                            name: '其它渠道',
                            value: '其它渠道'
                        }
                    ]
                },
                claim_status: {
                    type: 'select',
                    label: '是否赔付',
                    options: [
                        {
                            name: '否',
                            value: 0
                        },
                        {
                            name: '是',
                            value: 1
                        }
                    ]
                },
                is_delivery: {
                    type: 'select',
                    label: '配送状态',
                    options: [
                        {
                            name: '未配送',
                            value: 0
                        },
                        {
                            name: '配送中',
                            value: 1
                        },
                        {
                            name: '配送完成',
                            value: 2
                        }
                    ]
                },
                claim: {
                    type: 'input',
                    inputType: 'textarea',
                    label: '赔付情况'
                },
                desc: {
                    type: 'input',
                    inputType: 'textarea',
                    label: '备注'
                },
                desc2: {
                    type: 'input',
                    inputType: 'textarea',
                    label: '客服备注'
                },
                id: {
                    type: 'hidden'
                },
                addressId: {
                    type: 'hidden'
                }
            },
            searchColumns: {
                tid: {
                    type: 'input',
                    label: '订单号'
                },
                receiver_name: {
                    type: 'input',
                    label: '姓名'
                },
                receiver_tel: {
                    type: 'input',
                    label: '手机号'
                },
                name: {
                    type: 'input',
                    label: '骑手姓名'
                },
                phone: {
                    type: 'input',
                    label: '骑手手机'
                },
                title: {
                    type: 'input',
                    label: '商品名称'
                },
                item_no: {
                    type: 'input',
                    label: '商品编码'
                },
                desc: {
                    type: 'input',
                    label: '备注'
                },
                desc2: {
                    type: 'input',
                    label: '客服备注'
                },
                size: {
                    type: 'select',
                    label: '尺寸',
                    options: [],
                    optionsLabel: {
                        name: 'name',
                        value: 'name'
                    }
                },
                express_type: {
                    type: 'select',
                    label: '配送方式',
                    options: [
                        {
                            name: '快递发后',
                            value: 0
                        },
                        {
                            name: '到点自提',
                            value: 1
                        },
                        {
                            name: '同城配送',
                            value: 2
                        }
                    ]
                },
                claim_status: {
                    type: 'select',
                    label: '是否赔付',
                    options: [
                        {
                            name: '否',
                            value: 0
                        },
                        {
                            name: '是',
                            value: 1
                        }
                    ]
                },
                status: {
                    type: 'select',
                    label: '订单状态',
                    options: [
                        {
                            name: '待付款',
                            value: 'WAIT_BUYER_PAY'
                        },
                        {
                            name: '已支付',
                            value: 'TRADE_PAID'
                        },
                        {
                            name: '待确认',
                            value: 'WAIT_CONFIRM'
                        },
                        {
                            name: '待发货',
                            value: 'WAIT_SELLER_SEND_GOODS'
                        },
                        {
                            name: '待收货',
                            value: 'WAIT_BUYER_CONFIRM_GOODS'
                        },
                        {
                            name: '已完成',
                            value: 'TRADE_SUCCESS'
                        },
                        {
                            name: '已关闭',
                            value: 'TRADE_CLOSED'
                        }
                    ]
                },
                channel: {
                    type: 'select',
                    label: '订单渠道',
                    options: [
                        {
                            name: '微信小程序',
                            value: '微信小程序'
                        },
                        {
                            name: '美团',
                            value: '美团'
                        },
                        {
                            name: '其它渠道',
                            value: '其它渠道'
                        }
                    ]
                },
                refund_state: {
                    type: 'select',
                    label: '退款状态',
                    options: [
                        {
                            name: '未退款',
                            value: 0
                        },
                        {
                            name: '部分退款',
                            value: 2
                        },
                        {
                            name: '全部退款',
                            value: 12
                        }
                    ]
                },
                is_delivery: {
                    type: 'select',
                    label: '配送状态',
                    options: [
                        {
                            name: '未配送',
                            value: 0
                        },
                        {
                            name: '配送中',
                            value: 1
                        },
                        {
                            name: '配送完成',
                            value: 2
                        }
                    ]
                },
                // sku_id: {
                //     type: 'select',
                //     label: 'SKU',
                //     options: [],
                //     optionsLabel: {
                //         name: 'name',
                //         value: 'sku_id'
                //     }
                // },
                created: {
                    type: 'range',
                    label: '下单时间'
                },
                success_time: {
                    type: 'range',
                    label: '送达时间'
                }
            },
            tagColumns: {
                number: {
                    type: 'select',
                    label: '冰箱编号',
                    options: [],
                    optionsLabel: {
                        name: 'number',
                        value: 'number'
                    }
                }
            },
            orderColumns: {
                time: {
                    type: 'datarange',
                    label: '同步时间',
                    format: 'YYYY-MM-DD'
                }
            },
            deliveryColumns: {
                deliveryId: {
                    type: 'select',
                    label: '配送员',
                    options: [],
                    optionsLabel: {
                        name: 'username',
                        value: 'id'
                    }
                }
            },
            status: {
                WAIT_BUYER_PAY: '等待买家付款',
                TRADE_PAID: '订单已支付',
                WAIT_CONFIRM: '订单待确认',
                WAIT_SELLER_SEND_GOODS: '等待卖家发货',
                WAIT_BUYER_CONFIRM_GOODS: '等待买家确认收货',
                TRADE_SUCCESS: '订单完成',
                TRADE_CLOSED: '交易关闭'
            },
            types: {
                0: '未支付',
                1: '微信自有支付',
                2: '支付宝wap',
                5: '财付通',
                7: '代付',
                8: '联动优势',
                9: '货到付款',
                10: '大账号代销',
                11: '受理模式',
                12: '百付宝',
                13: 'sdk支付',
                14: '合并付货款',
                15: '赠品',
                16: '优惠兑换',
                17: '自动付货款',
                18: '爱学贷',
                19: '微信wap',
                20: '微信红包支付',
                21: '返利',
                22: 'ump红包',
                24: '易宝支付',
                25: '储值卡',
                27: 'qq支付',
                28: '有赞E卡支付',
                29: '微信条码',
                30: '支付宝条码',
                31: '礼品卡支付',
                35: '会员余额',
                72: '微信扫码二维码支付',
                100: '代收账户',
                300: '储值账户',
                400: '保证金账户',
                101: '收款码',
                102: '微信',
                103: '支付宝',
                104: '刷卡',
                105: '二维码台',
                106: '储值卡',
                107: '有赞E卡',
                110: '标记收款-自有微信支付',
                111: '标记收款-自有支付宝',
                112: '标记收款-自有POS刷卡',
                113: '通联刷卡支付',
                200: '记账账户',
                201: '现金'
            },
            payTypes: {
                WEIXIN: '微信自有支付',
                WEIXIN_DAIXIAO: '微信代销支付',
                ALIPAY: '支付宝支付',
                BANKCARDPAY: '银行卡支付',
                PEERPAY: '代付',
                CODPAY: '货到付款',
                BAIDUPAY: '百度钱包支付',
                PRESENTTAKE: '直接领取赠品',
                COUPONPAY: '优惠券/码全额抵扣',
                BULKPURCHASE: '来自分销商的采购',
                MERGEDPAY: '合并付货款',
                ECARD: '有赞E卡支付',
                PURCHASE_PAY: '采购单支付',
                MARKPAY: '标记收款',
                OFCASH: '现金支付',
                PREPAIDCARD: '储值卡余额支付',
                ENCHASHMENT_GIFT_CARD: '礼品卡支付'
            },
            teams: {
                0: '微商城',
                1: '微小店',
                2: '爱学贷微商城',
                3: '批发店铺',
                4: '批发商城',
                5: '外卖',
                6: '美业',
                7: '超级门店',
                8: '收银',
                9: '收银加微商城',
                10: '零售总部',
                99: '有赞开放平台平台型应用创建的店铺'
            },
            refund: {
                0: '未退款',
                2: '部分退款成功',
                12: '全额退款成功'
            },
            orderType: {
                0: '普通订单',
                1: '送礼订单',
                2: '代付',
                3: '分销采购单',
                4: '赠品',
                5: '心愿单',
                6: '二维码订单',
                7: '合并付货款',
                8: '1分钱实名认证',
                9: '品鉴',
                10: '拼团',
                15: '返利',
                35: '酒店',
                40: '外卖',
                41: '堂食点餐',
                46: '外卖买单',
                51: '全员开店',
                61: '线下收银台订单',
                71: '美业预约单',
                72: '美业服务单',
                75: '知识付费',
                81: '礼品卡',
                100: '批发'
            },
            deliveryStatus: {
                0: '未配送',
                1: '配送中',
                2: '配送完成'
            },
            search: {},
            form: {},
            tagForm: {},
            orderForm: {},
            deliveryForm: {},
            editForm: {},
            rules: rules,
            delOrder,
            userInfo: {
                type: ''
            },
            data: [],
            total: 0
        }
    },
    created() {
        this.userInfo = this.$store.state.user.info
        this.findOrderList()
        this.findRefrigeratorAll()
        this.findSizeAll()
    },
    watch: {
        search: {
            handler() {
                this.findOrderList()
            },
            deep: true
        }
    },
    sockets: {
        // create(v) {
        //     console.log('orderList====', v)
        //     if (!v.goods) return
        //     if (this.data.some(items => items.id === v.id)) {
        //         const data = this.data.filter(items => items.id !== v.id)
        //         this.data = [v, ...data]
        //     } else {
        //         this.data.pop()
        //         this.data.unshift(v)
        //     }
        // }
    },
    methods: {
        formatAddress(address) {
            let str = ''
            if (!address) return str

            if (address.delivery_province) {
                str += `${address.delivery_province}-`
            }
            if (address.delivery_city) {
                str += `${address.delivery_city}-`
            }
            if (address.delivery_district) {
                str += `${address.delivery_district}-`
            }
            if (address.delivery_address) {
                str += `${address.delivery_address}`
            }
            return str
        },
        filter(record) {
            if (record.created.length === 2) {
                const [start, end] = record.created
                record.create_start = start
                record.create_end = end
            }
            if (record.success_time.length === 2) {
                const [start, end] = record.success_time
                record.success_start = start
                record.success_end = end
            }
            this.page.page = 1
            return record
        },
        changeData(record, type) {
            if (type === 'edit') {
                record.receiver_tel = record.address.receiver_tel
                record.delivery_address = record.address.delivery_address
                record.delivery_start_time = record.address.delivery_start_time
                record.delivery_end_time = record.address.delivery_end_time
                record.delivery_time = [record.delivery_start_time, record.delivery_end_time]
                record.addressId = record.address.id
            }
            return record
        },
        changeExport(record) {
            const form = {}
            Object.keys(record)
                .filter(key => !Array.isArray(record[key]))
                .forEach(key => {
                    form[key] = record[key]
                })

            let params = '1=1'
            Object.keys(form).forEach(key => {
                params += `&${key}=${form[key]}`
            })
            exportOrder(params)
        },
        transformGoods(record) {
            const res = record
                .map(items => {
                    return `<div>${items.sku_properties_name
                        .filter(items => items.v)
                        .map(item => `${item.k}: ${item.v}`)
                        .join(' ')}</div>`
                })
                .join('')
            return res
        },
        onChangePagination(page) {
            this.page.page = page
            this.findOrderList()
        },
        onShowSizeChange(page, limit) {
            console.log(page, limit)
            this.page.page = page
            this.page.limit = limit
            this.findOrderList()
        },
        async onClickEdit(record) {
            this.editVisible = true
            if (record.address) {
                record.receiver_tel = record.address.receiver_tel
                record.delivery_address = record.address.delivery_address
                record.delivery_start_time = record.address.delivery_start_time
                record.delivery_end_time = record.address.delivery_end_time
                record.addressId = record.address.id
            }
            record.delivery_time = [record.delivery_start_time, record.delivery_end_time]
            this.editForm = record
        },
        async onConfrimOrderEdit() {
            console.log(this.editForm)
            const res = await editOrder(this.editForm)

            const { message } = res

            this.$message.success(message)

            this.findOrderList()
        },
        async onClickSyncOrder() {
            this.orderVisible = true
        },
        async onConfrimSyncOrder() {
            this.$socket.emit('syncOrder', this.orderForm)
        },
        onClickDelivery() {
            this.deliveryVisible = true
        },
        async onConfirmDelivery() {
            const res = await deliveryOrder()

            const { message } = res

            this.$message.success(message)

            // this.$refs.table.refresh()
            this.findOrderList()
        },
        async onClickOrderDelivery(record) {
            await this.findDeliveryAll()
            this.orderDeliveryVisble = true
            this.form = record
        },
        async onConfrimOrderDelivery() {
            const params = {
                deliveryId: this.deliveryForm.deliveryId,
                orderId: this.form.id
            }
            const res = await transformOrderDelivery(params)

            const { message } = res

            this.$message.success(message)

            // this.$refs.table.refresh()
            this.findOrderList()
        },
        onClickOrderDetails(record) {
            // this.findOrder(record.id)
            this.form = record
            this.visible = true
        },
        onClickOrderTag(record) {
            this.form = record
            this.tagVisible = true
        },
        async onConfrimOk() {
            const res = await orderTag({ id: this.form.id, ...this.tagForm })

            const { message } = res

            this.$message.success(message)

            // this.$refs.table.refresh()
            this.findOrderList()
        },
        onClickOrderUrgent(record) {
            this.urgentVisible = true
            this.form = record
        },
        async onConfirmUrgent() {
            const res = await urgetnOrder({ id: this.form.id })

            const { message } = res

            this.$message.success(message)
        },
        async onClickDecryption(record) {
            const res = await decryptionOrder(record)

            const { message, data } = res

            this.$message.success(message)

            record.address = data.address
        },
        async findOrder(id) {
            const res = await findOrder({ id })

            const { data } = res

            this.form = data

            this.visible = true
        },
        async findRefrigeratorAll() {
            const res = await findRefrigeratorAll()

            const { data } = res

            this.$set(this.tagColumns.number, 'options', data)
        },
        async findSkuAll() {
            const res = await findSkuAll()

            const { data } = res

            // this.$set(this.searchColumns.sku_id, 'options', data)
            this.$set(this.searchColumns.item_no, 'options', data)
        },
        async findGoodsAll() {
            const res = await findGoodsAll()

            const { data } = res

            this.$set(this.searchColumns.title, 'options', data)
        },
        async findDeliveryAll() {
            const res = await findDeliveryAll()

            const { data } = res

            this.$set(this.deliveryColumns.deliveryId, 'options', data)
        },
        async findOrderList() {
            const params = {
                ...this.page,
                ...this.search
            }
            const res = await findOrderList(params)

            const {
                data: { data, total }
            } = res

            this.data = data

            this.page.total = total
        },
        async findSizeAll() {
            const res = await findSizeAll()

            const { data } = res

            this.$set(this.searchColumns.size, 'options', data)
        },
        onPrint(items) {
            this.$print.show(items)
        }
    }
}
</script>

<style lang="less">
.ant-descriptions + .ant-descriptions {
    margin-top: 20px;
}
.hevue-imgpreview-wrap {
    z-index: 11011;
}

.toolbar {
    .ant-btn + .ant-btn {
        margin-left: 10px;
        margin-bottom: 10px;
    }
}

.order-list {
    width: 100%;
    .bold {
        font-weight: bold;
    }
    .order-list-title {
        width: 100%;
        height: 50px;
        background: #eef5ff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        padding: 0 20px;
        box-sizing: border-box;
        font-size: 14px;
        .WAIT_BUYER_PAY,
        .TRADE_CLOSED {
            color: #ff5656;
        }
        .TRADE_PAID,
        .WAIT_CONFIRM,
        .WAIT_SELLER_SEND_GOODS,
        .WAIT_BUYER_CONFIRM_GOODS,
        .TRADE_SUCCESS {
            color: #3388ff;
        }
    }
    .order-list-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 17px;
        padding: 0 20px;
        box-sizing: border-box;
        font-size: 14px;
        .user-info {
            width: 400px;
            overflow: hidden; //超出的文本隐藏
            text-overflow: ellipsis;
            // white-space: nowrap;
            .address {
                span + span {
                    margin-left: 30px;
                }
            }
            .address-detail {
                margin-top: 10px;
                // white-space: nowrap;
                // text-overflow: ellipsis;
                // display: -webkit-box; //作为弹性伸缩盒子模型显示。
                // -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
                // -webkit-line-clamp: 2; //显示的行
            }
        }

        .delivery-info {
            div:last-child {
                margin-top: 10px;
            }
        }
    }

    .order-list-goods {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 10px 10px;
        grid-auto-rows: minmax(20px, auto);

        margin-top: 17px;
        padding: 0 20px;
        box-sizing: border-box;
        font-size: 14px;

        .goods-list {
            display: flex;
            .goods-item {
                display: flex;
                justify-content: space-between;
                img {
                    width: 70px;
                    height: 70px;
                    vertical-align: top;
                }
                .goods-info {
                    height: 70px;
                    margin-left: 10px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .goods-title {
                        color: #3388ff;
                        font-weight: 800;
                    }
                }
            }
        }
    }

    .order-list-split {
        width: 100%;
        height: 2px;
        margin-top: 15px;
        background-color: #f5f5f5;
    }

    .order-bottom {
        padding: 15px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .order-desc .desc {
            color: #ff8a4d;
        }
        .order-desc {
            margin-bottom: 10px;

            .order-desc-span + .order-desc-span {
                margin: 0 10px;
            }
        }
        .order-buttons {
            display: flex;
            .button {
                font-size: 14px;
                color: #fff;
                border-radius: 4px;
                padding: 2px 10px;
                box-sizing: border-box;
                width: 48px;
                cursor: pointer;
            }

            .button + .button {
                margin-left: 10px;
            }

            .edit {
                background-color: #3388ff;
            }

            .tag {
                background-color: #ff8a4d;
            }

            .details {
                background-color: #33adff;
            }

            .decryption {
                background-color: #ff5656;
            }

            .transform {
                background-color: #ffcb51;
                width: 90px;
            }
        }
    }
    .order-bottomn-desc {
        .desc {
            color: #ff8a4d;
        }
    }
}

.order-list + .order-list {
    margin-top: 20px;
}
</style>
